/* eslint-disable react-hooks/rules-of-hooks */
import React, { useState } from "react";
import { getDetailApi } from "../../api/train";
import { Card, Selector } from "antd-mobile";
import { useLoaderData } from "react-router-dom";
import dayjs from "dayjs";
import styles from "./css/detail.module.css";
function index() {
  const { info } = useLoaderData();
  const [stype, setStype] = useState("ssoftSeat");
  const options = [
    {
      label: "一层后B区",
      description: `￥${info.ssoftSeat.price}/${info.ssoftSeat.ticketNum}`,
      value: "ssoftSeat",
    },
    {
      label: "二层后E区",
      description: `￥${info.fsoftSeat.price}/${info.fsoftSeat.ticketNum}`,
      value: "fsoftSeat",
    },
    {
      label: "二层前D区",
      description: `￥${info.businessSeat.price}/${info.businessSeat.ticketNum}`,
      value: "businessSeat",
    },
  ];
  const gopay = () => {
    let url = `https://api-ticket.liulongbin.top/order/pay?orderNo=${Date.now()}&amount=${info.ssoftSeat.price}`;
    window.open(url, "_self");
  };
  return (
    <div>
      <Card style={{ background: "#ccc" }}>
        <div>{dayjs().format("MM-DD")} 周五 </div>
        <div>
          上 {info.startTime} {info.startStation}
        </div>
        <div>↓</div>
        <div>
          下 {info.endTime} {info.endStation}
        </div>
      </Card>
      <Selector
        columns={3}
        options={options}
        defaultValue={[stype]}
        onChange={(arr) => {
          if (arr.length !== 0) {
            setStype(arr[0]);
          }
        }}
      />
      <div className={styles.SeatPrice}>
        <div className={styles.row}>
          <div className={styles.col}>
            <span className={styles.price}>￥101</span>
            <span className={styles.yh}>已优惠6元</span>
          </div>

          <div className={styles.col}>
            <span className={styles.title}>退票赔付保障</span>
            <span className={styles.desc}>7*24小时专人服务</span>
          </div>

          <div className={styles.col}>
            <div className={styles.btn} onClick={gopay}>
              订
            </div>
          </div>
        </div>

        <div className={styles.row}>
          <div className={styles.col}>
            <span className={styles.price}>￥101</span>
            <span className={styles.yh}>已优惠6元</span>
          </div>

          <div className={styles.col}>
            <span className={styles.title}>12306购票</span>
            <span className={styles.desc}>官网直购，需登录12306账号</span>
          </div>

          <div className={styles.col}>
            <div className={styles.btn} onClick={gopay}>
              订
            </div>
          </div>
        </div>

        <div className={styles.row}>
          <div className={styles.col}>
            <span className={styles.price}>￥101</span>
            <span className={styles.yh}>已优惠6元</span>
          </div>

          <div className={styles.col}>
            <span className={styles.title}>无12306购票</span>
            <span className={styles.desc}>免登12306，两程一起出</span>
          </div>

          <div className={styles.col}>
            <div className={styles.btn} onClick={gopay}>
              订
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default index;
export const loader = async ({ params, request }) => {
  const url = new URL(request.url);
  const obj = Object.fromEntries(url.searchParams);
  const { data: info } = await getDetailApi(params.id, obj);
  console.log(info);

  return { info };
};
